<template>
  <!-- 视频列表 -->
  <div class="video">
    <ul class="video-main">
      <li
        v-for="(item, index) in videolist"
        :key="index"
        @click="getVideo(item.value)"
        :class="{ active: num === item.value }"
      >
        {{ item.name }}
      </li>
    </ul>
    <div class="video-wrap">
      <ul class="videolist">
        <li v-for="(data, index) in videoData" :key="index">
          <video-player
            class="video-player vjs-custom-skin"
            :playsinline="true"
            :options="data.vurl | videoOption"
          >
          </video-player>
          <p>
            {{ data.videoName }}
          </p>
        </li>
      </ul>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="config.pageNum"
        :page-size="config.pageSize"
        layout="total,prev, pager, next, jumper"
        :total="total"
        class="pager"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
import { list } from '@/api/video/sysVideoData.js'
export default {
  components: { videoPlayer },
  data() {
    return {
      videoData: [],
      config: {
        pageNum: 1,
        pageSize: 6,
        remark: '井下'
      },
      num: '0',
      total: 0,
      videolist: [
        {
          value: '0',
          name: '井下工区'
        },
        {
          value: '1',
          name: '地面工区'
        }
      ]
    }
  },
  filters: {
    videoOption(val) {
      return {
        live: false,
        preload: 'auto',
        loop: false,
        autoplay: false,
        language: 'zh-CN',
        aspectRatio: '16:8',
        fluid: true,
        sources: [
          {
            src: val // url地址
          }
        ],
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        },
        flash: {
          hls: {
            withCredentials: false
          }
        }
      }
    }
  },
  methods: {
    handleSizeChange(limit) {
      this.config.pageSize = limit
      this.getVideoList()
    },
    handleCurrentChange(page) {
      this.config.pageNum = page
      this.getVideoList()
    },
    getVideo(data) {
      if (data === '0') {
        this.config.remark = '井下'
      } else {
        this.config.remark = '井上'
      }
      this.num = data
      this.config.pageNum = 1
      this.getVideoList()
    },
    getVideoList() {
      this.videoData = []
      list(this.config).then(res => {
        if (res.code === 200) {
          this.videoData = res.rows
          this.total = res.total
        }
      })
    }
  },
  mounted() {
    this.getVideo('0')
  }
}
</script>

<style lang="scss" scoped>
.video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(../../../assets/images/back.png) no-repeat;
  background-size: 100% 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  ::v-deep.el-pager li {
    padding: 0 4px;
    background: #0e2440;
  }
  ::v-deep.el-pagination {
    color: #7ba7ff;
  }
  ::v-deep.el-pagination .btn-prev,
  ::v-deep.el-pagination .btn-next {
    background: #0e2440;
    color: #fff;
  }
  ::v-deep.el-input__inner {
    background: #0e2440;
    border: none;
    color: #fff;
  }
}
.video-main {
  height: 0.6rem;
  box-sizing: border-box;
  text-align: right;
  padding: 0.2rem;
  li {
    display: inline-block;
    color: #fff;
    line-height: 0.4rem;
    font-size: 0.2rem;
    cursor: pointer;
    height: 0.4rem;
    padding: 0 0.3rem;
    border: 1px solid #1f9ecc;
    background: rgba(31, 203, 255, 0.2);
    margin-right: 0.15rem;
  }
  li.active {
    color: #1f9ecc;
  }
}
.video-wrap {
  flex: 1;
  .videolist {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    li {
      width: calc(33% - 40px);
      cursor: pointer;
      margin: 12px 20px;
      background-color: var(--color-bg-2);
      box-shadow: 1px 0 0 0 var(--color-neutral-3),
        0 1px 0 0 var(--color-neutral-3), 1px 1px 0 0 var(--color-neutral-3),
        1px 0 0 0 var(--color-neutral-3) inset,
        0 1px 0 0 var(--color-neutral-3) inset;
      cursor: pointer;
      .video-player {
        width: 100%;
        height: auto;
        border: 1px solid #0f2e66;
        overflow: hidden;
      }
      p {
        margin-top: 0.05rem;
        line-height: 35px;
        font-size: 18px;
        color: #fff;
        letter-spacing: 2px;
        font-weight: 550;
        background-image: -webkit-linear-gradient(
          bottom,
          #02becf,
          #01afe1,
          #01a2f1
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
::v-deep .video-js .vjs-big-play-button {
  position: absolute;
  left: 50% !important;
  top: 45% !important;
  transform: translate(-50%, -50%) !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50%;
}
::v-deep .vjs-icon-placeholder:before {
  top: 6px !important;
}
::v-deep .el-pagination__jump,
::v-deep .el-pagination__total {
  color: #7ba7ff;
}
::v-deep .pager {
  position: absolute;
  bottom: 15px;
  right: 20px;
}
</style>
